組件實作 : Demo
當我們在填寫表單資料的時候，有時候會帶入一些郵遞區號的資料，這些資料要一個個去建立，可能需要花滿多時間，這時候我們就可以使用「TWzipcod 臺灣郵遞區號」這個的套件，來幫我們減少開發的時間。本篇實作原生 JavaScript 與 jQuery 這兩種寫法。要使用哪種方法可自行決定。
本篇第 2 章介紹原生 JavaScript 的寫法。第 3 章則是介紹 jQuery 的寫法。
匯入twzipcode.js到你的專案中，把下面這段放在你的 HTML 檔案中：
<script src="/你的路徑/twzipcode.js"></script>
twzipcode.js檔案可以直接到 twzipcode.js 來複製，複製的檔案加入到你的專案中。或是直接使用下列提供的 JS 來連結。
在你的 HTML 檔案中加入 JS 連結。
HTML：
<script src="https://code.essoduke.org/js/twzipcode/twzipcode.js"></script>
你如果使用 CodePene，則要在 Settings 的 JS 中加入下列網址。
https://code.essoduke.org/js/twzipcode/twzipcode.js
在 HTML 中加入 TWzipcod 的主體，到時候畫面顯示的郵遞區號需要這行語法。
HTML：
<div class="twzipcode"></div>
TWzipcode 必須要初始後才能使用，在 JavaScript 檔案中加入初始化的語法。
JavaScript：
const twzipcode = new TWzipcode('.twzipcode');
顯示結果：
此時，你可以拿到最小單位的 TWzipcode。接著要來做基本排版。因為前面文章有說明過起手式用法，所以就不再重複說明，而這裡主要是將 TWzipcod 置中顯示。
CSS：
* {
margin: 0;
padding: 0;
list-style: none;
}
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.twzipcode {
display: grid;
grid-template-columns: auto auto;
gap: 0 5px;
}
顯示結果：
如果想要對 TWzipcode 的樣式或排版做更動，可以直接使用 Class：
.twzipcode即可。
我們在這裡把功能寫完整一點。首先，可以加入地址輸入欄位，一個能夠顯示資料的 Textarea，以及一個可以取得完整地址的 Button，這時我們能先完成 HTML 的架構。
HTML：
<div class="container">
<div class="twzipcode"></div>
<input type="text" class="address" id="address" />
<textarea name="" id="textarea"></textarea>
<button type="" id="btn" class="btn">地址產生器</button>
</div>
用 CSS 修改排版，以及版面規劃。
CSS：
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: grid;
grid-template-columns: auto;
gap: 5px;
}
textarea {
width: 100%;
resize: none;
border: 1px solid gray;
}
.twzipcode {
display: grid;
grid-template-columns: auto auto;
gap: 0 5px;
}
.btn {
width: 100%;
padding: 5px 0;
color: white;
background-color: #87d596;
border: none;
border-radius: 2px;
cursor: pointer;
}
.btn:hover {
background-color: #6bd280;
}
.container select,
button,
textarea {
border: 1px solid gray;
width: 100%;
font-size: 16px;
padding: 10px 0;
}
.address {
width: 100%;
}
CSS 部分單純是排版，和修改樣式，這部分可以自行修改。之前沒介紹過的應該是 textarea 的
resize: none;吧？設定為 none，代表視窗不能讓使用者自行修改。
啟用 TWzipcode 的功能，這裡添加按鈕事件監聽，當按鈕點擊時，可以利用 get[0] 來取得你的縣市、鄉鎮市區、郵遞區號等等資訊。
JavaScript：
const twzipcode = new TWzipcode(".twzipcode");
twzipcode.set(970);
var btns = document.getElementById("btn");
btns.addEventListener("click", foo, false);
function foo() {
let county = twzipcode.get("county");
let get = twzipcode.get();
let address = document.getElementById("address");
document.getElementById(
"textarea"
).value = `${get[0].zipcode} ${get[0].county}${get[0].district}${address.value}`;
}
相關的用法可以直接這篇文章，寫的很精簡實用，可以當快速筆記來看。例如：可以參考文章中 twzipcode 的參數，這三個物件分別為：county（縣市）、district（鄉鎮市區）和zipcode（郵遞區號）。
{
// 縣市
'county': {
'label' : '初始化標題', // (string) 預設 `縣市`
'name' : '表單名稱', // (string) 預設 `county`
'value' : '預設值', // (string)
'css' : 'CSS 樣式', // (string)
'hidden' : '要隱藏的縣市', // (Array|string) 可使用陣列或 , 字串。例如 ['臺北市','新北市'] or '臺北市,新北市',
'required' : true|false, // 是否為表單必須
// 事件
'onSelect' : function (e) { // change 事件
// HTMLSelectElement
console(this.value);
}
},
// 鄉鎮市區
'district': {
'label' : '初始化標題', // (string) 預設 `鄉鎮市區`
'name' : '表單名稱', // (string) 預設 `district`
'value' : '預設值', // (string)
'css' : 'CSS 樣式', // (string)
'hidden' : '要隱藏的區域', // (Array|string) 可使用陣列或 , 字串。例如 ['信義區','三星鄉'] or '信義區,三星鄉',
'required' : true|false, // 是否為表單必須
// 事件
'onSelect' : function (e) { // change 事件
// HTMLSelectElement
console(this.value);
}
},
// 郵遞區號
'zipcode': {
'name' : 'zipcode', // 表單名稱
'value' : '預設值', // 預設值
'css' : '', // 樣式名稱
'hidden' : true|false, // 隱藏
// 以下為 input attributes
'type' : 'number', // input type[text,number…]
'min' : 0, // 只有 input=number 時有效
'max' : 0, // 只有 input=number 時有效
'step' : 1, // 只有 input=number 時有效
'placeholder': '',
'maxlength' : 3, // 只有 input=text 時有效
'pattern' : '\\d+',
'readonly' : true|false,
'required' : true|false,
// 事件
'onKeyUp' : function (event, countyValue, districtValue) {
// HTMLInputElement
console(this.value);
},
'onFocus' : function (event) {
// HTMLInputElement
console(this.value);
},
'onBlur' : function (event) {
// HTMLInputElement
console(this.value);
}
},
// 僅用於 `detect` 查詢使用
'GMAP_KEY' : 'Google Maps API Key',
// 自動偵測位置
'detect' : true|false,
// 是否將郵遞區號合併入鄉鎮市區清單？
'combine' : true|false,
// 是否顯示離島（預設 Yes）
'island' : true|false,
// 自訂郵遞區號 JSON
'database' : {}
}
JavaScript：
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
JavaScript：
<script src="js/alone/jquery.twzipcode.min.js"></script>
若使用 CodePen 可以在 Settings 下的 JS 頁面中，直接加入下面網址，即可安裝套件。
https://cdn.jsdelivr.net/npm/jquery-twzipcode@1.7.14/jquery.twzipcode.min.js
https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
HTML：
<div class="container">
<div id="twzipcode_ADV" class="twzipcode"></div>
<input type="text" class="address" id="address" />
<textarea name="" id="textarea"></textarea>
<button type="" id="btn" class="btn">地址產生器</button>
</div>
jQuery：
$("#twzipcode_ADV").twzipcode({
zipcodeIntoDistrict: true, // 郵遞區號自動顯示在地區
css: ["city form-control", "town form-control"] // 自訂 "城市"、"地區" class 名稱
});
$("#btn").click(function () {
$("#twzipcode_ADV").twzipcode("get", function (county, district, zipcode) {
let address = zipcode + county + district + $("#address").val();
$("#textarea").val(address);
});
});
顯示結果：
jQuery 的寫法可以參考資料【1】【2】。
我們使用原生的 JavaScript 和 jQuery 分別實作 TWzipcod 輸入郵遞區號的功能，使用 TWzipcod 讓使用者可以選擇縣市與鄉鎮的下拉式選單，以及一個可以輸入地址輸入框，還有一個能夠顯示完整地址的 Textarea 文字框。最後，實作一個能夠在 Textarea 上顯示完整地址的點擊按鈕，使用 TWzipcod 的下拉選單，就可以不用擔心區碼被亂填的問題。
iThome鐵人賽
看影片追技術